// 定义字体(px)单位
@for $i from 12 to 30 {
  .u-font-#{$i} {
    font-size: $i + px;
  }
}
// 定义flex等分
@for $i from 0 through 12 {
  .u-flex-#{$i} {
    flex: $i;
  }
}

// 边框
@mixin borderAll($w: 1px, $r: #eee) {
  border: $w solid $r;
}
@mixin borderTop($w: 1px, $r: #eee) {
  border-top: $w solid $r;
}
@mixin borderBottom($w: 1px, $r: #eee) {
  border-bottom: $w solid $r;
}
// 设置文字渐变色
@mixin lg-text($c1: #f70909, $c2: #ebb00f) {
  background-image: -webkit-linear-gradient(left, $c1, $c2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
// 使用方式--->@include borderAll($r:red);	//mixin混入

/*  清除浮动  */
%clearFix {
  *zoom: 1;
  &:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
  }
}

// 显示省略号 -->只显示一行文字
%ellipsis {
  // 前面加上 % 如果不使用，不会编译css
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
//使用方式---->@extend %ellipsis;	//继承
//显示省略号 -->显示多行文字
@mixin twoEllipsis($row) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $row; //需要控制的文本行数
  overflow: hidden;
}

// 水平垂直居中
.all-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* flex布局 */
.u-f,
.u-f-r2,
.u-f-r,
.u-f-c,
.u-f-ac,
.u-f-jc,
.u-f-ajc,
.u-f-sbc {
  display: flex;
}

.u-f-ajc {
  justify-content: center;
  align-items: center;
}

.u-f-sbc {
  justify-content: space-between;
  align-items: center;
}

.u-f-asc {
  justify-content: space-around;
  align-items: center;
}

.u-f-item {
  flex: 1;
}

.u-f-wrap {
  flex-wrap: wrap;
}

.u-f-r {
  flex-direction: row;
}

.u-f-r2 {
  flex-direction: row-reverse;
}

.u-f-c {
  flex-direction: column;
}

.u-f-start {
  justify-content: flex-start;
}

.u-f-end {
  justify-content: flex-end;
}

.u-f-jc {
  justify-content: center;
}

.u-f-jsb {
  justify-content: space-between;
}

.u-f-ac {
  align-items: center;
}

.u-f-as {
  align-items: flex-start;
}

.u-f-ae {
  align-items: flex-end;
}
